<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>中空领航</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.5;
            height: 100vh;
            overflow: hidden;
        }
        
        /* 主题颜色 */
        :root {
            --primary-color: #0B3D91; /* 深蓝色主题 */
            --secondary-color: #4A90E2; /* 天蓝色 */
            --accent-color: #FFD700; /* 金色点缀 */
            --light-color: #FFFFFF;
            --dark-color: #1A1A1A;
            --gray-color: #F0F2F5;
            --green-color: #00A778; /* 按钮绿色 */
        }
        
        /* 顶部导航栏 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: transparent;
            color: var(--dark-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            z-index: 100;
        }
        
        .navbar .location {
            display: flex;
            align-items: center;
        }
        
        .navbar .location span {
            font-size: 16px;
            font-weight: bold;
            margin-right: 5px;
        }
        
        .navbar .search-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--light-color);
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }
        
        /* 地图容器 */
        #container {
            width: 100%;
            height: 100vh;
            position: relative;
            z-index: 1;
        }
        
        /* 滑动内容区域 */
        .sliding-content {
            position: fixed;
            bottom: 60px; /* 为底部导航留出空间 */
            left: 0;
            width: 100%;
            max-height: 50%;
            overflow-y: auto;
            z-index: 10;
            padding-bottom: 10px;
            transition: max-height 0.3s ease;
            transform: translateZ(0); /* 提高性能 */
            touch-action: pan-y;
        }
        
        /* 添加滑动把手样式 */
        .sliding-handle {
            width: 40px;
            height: 5px;
            border-radius: 3px;
            background-color: rgba(255, 255, 255, 0.5);
            margin: 5px auto 10px;
            position: relative;
            z-index: 11;
        }
        
        /* 展开状态 */
        .sliding-content.expanded {
            max-height: 80%;
        }
        
        /* 折叠状态 */
        .sliding-content.collapsed {
            max-height: 10%;
        }
        
        /* 八大功能模块 */
        .modules-section {
            margin: 10px 15px;
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .modules-section .section-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: var(--primary-color);
        }
        
        .modules-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        
        .module-item {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border-radius: 10px;
            padding: 15px 10px;
            text-align: center;
            color: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        
        .module-item:active {
            transform: scale(0.95);
        }
        
        .module-item .icon {
            font-size: 24px;
            margin-bottom: 8px;
        }
        
        .module-item .name {
            font-size: 12px;
            font-weight: bold;
        }
        
        .module-item .desc {
            font-size: 10px;
            opacity: 0.8;
            margin-top: 3px;
        }
        
        /* 行业资讯 */
        .news-section {
            margin: 10px 15px;
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .news-section .section-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: var(--primary-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .news-section .more {
            font-size: 12px;
            color: var(--secondary-color);
        }
        
        .news-list {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .news-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
        }
        
        .news-item:last-child {
            border-bottom: none;
        }
        
        .news-item .news-content {
            flex: 1;
        }
        
        .news-item .title {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .news-item .meta {
            font-size: 12px;
            color: #999;
            display: flex;
            align-items: center;
        }
        
        .news-item .meta .time {
            margin-right: 10px;
        }
        
        .news-item .thumbnail {
            width: 80px;
            height: 60px;
            border-radius: 5px;
            overflow: hidden;
            margin-left: 10px;
        }
        
        .news-item .thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 20%;
        }
        
        .nav-item .icon {
            font-size: 22px;
            margin-bottom: 3px;
            color: #999;
        }
        
        .nav-item .label {
            font-size: 12px;
            color: #999;
        }
        
        .nav-item.active .icon,
        .nav-item.active .label {
            color: var(--primary-color);
        }
        
        /* 中间凸起的导航项 */
        .nav-item.featured {
            transform: translateY(-10px);
        }
        
        .nav-item.featured .icon {
            background-color: var(--primary-color);
            color: white;
            width: 44px;
            height: 44px;
            border-radius: 22px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 2px;
            font-size: 26px;
            box-shadow: 0 4px 8px rgba(11, 61, 145, 0.3);
        }
        
        .nav-item.featured .label {
            font-weight: bold;
            color: var(--primary-color);
        }
        
        /* 地图信息窗口 */
        .amap-info-content {
            padding: 5px 10px;
        }
        
        .info-window {
            background-color: white;
            border-radius: 8px;
            padding: 10px;
            width: 160px;
        }
        
        .info-window .header {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .info-window .header img {
            width: 40px;
            height: 40px;
            border-radius: 5px;
            margin-right: 10px;
        }
        
        .info-window .title {
            font-size: 14px;
            font-weight: bold;
        }
        
        .info-window .flight {
            font-size: 12px;
            color: var(--primary-color);
            margin-top: 5px;
        }
        
        /* 图标字体 (使用Material Icons) */
        @font-face {
            font-family: 'Material Icons';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
        }
        
        .material-icons {
            font-family: 'Material Icons';
            font-weight: normal;
            font-style: normal;
            font-size: 24px;
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-feature-settings: 'liga';
            -webkit-font-smoothing: antialiased;
        }
        
        /* 自定义定位按钮 */
        .location-btn {
            position: fixed;
            right: 15px;
            bottom: 60%; /* 位于底部导航栏上方 */
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: white;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 99;
            color: var(--primary-color);
        }
        
        .location-btn:active {
            transform: scale(0.95);
        }
        
        /* 全局动画定义 */
        @keyframes bounce {
            from {
                transform: translateY(0);
            }
            to {
                transform: translateY(-10px);
            }
        }
        
        /* 红包标记样式 */
        .red-packet-marker {
            width: 40px;
            height: 40px;
            background-image: url('');
            background-size: contain;
            background-repeat: no-repeat;
            cursor: pointer;
            animation: bounce 1s infinite alternate;
            transform-origin: bottom center;
        }
        
        /* 红包弹窗样式 */
        .red-packet-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1001;
        }
        
        .red-packet-content {
            width: 280px;
            height: 380px;
            background: linear-gradient(135deg, #FF3030, #FF9797);
            border-radius: 15px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }
        
        .red-packet-header {
            width: 100%;
            height: 120px;
            background: linear-gradient(135deg, #FF9500, #FF5E3A);
            border-bottom-left-radius: 50% 20px;
            border-bottom-right-radius: 50% 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #FFD700;
            font-size: 30px;
            font-weight: bold;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .red-packet-amount {
            margin-top: 40px;
            font-size: 50px;
            font-weight: bold;
            color: #FFD700;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .red-packet-text {
            margin-top: 20px;
            font-size: 16px;
            color: #fff;
        }
        
        .red-packet-open {
            margin-top: 30px;
            width: 80%;
            padding: 15px 0;
            background-color: #FFD700;
            border: none;
            border-radius: 30px;
            color: #FF3030;
            font-size: 18px;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            cursor: pointer;
        }
        
        .red-packet-close {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.3);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        
        /* 商户列表样式 */
        .merchants-card {
            position: fixed;
            bottom: 60px; /* 为底部导航留出空间 */
            left: 0;
            width: 100%;
            max-height: 60%;
            overflow-y: auto;
            z-index: 10;
            padding-bottom: 10px;
            background-color: white;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            transform: translateZ(0);
            display: none; /* 默认隐藏 */
        }
        
        .merchants-handle {
            width: 40px;
            height: 5px;
            border-radius: 3px;
            background-color: rgba(0, 0, 0, 0.2);
            margin: 10px auto 5px;
        }
        
        .merchants-header {
            padding: 10px 15px;
            border-bottom: 1px solid #f0f0f0;
            font-size: 16px;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        .merchant-item {
            display: flex;
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .merchant-image {
            width: 80px;
            height: 80px;
            border-radius: 5px;
            overflow: hidden;
            margin-right: 15px;
            flex-shrink: 0;
        }
        
        .merchant-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .merchant-info {
            flex: 1;
        }
        
        .merchant-name {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }
        
        .merchant-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        
        .merchant-meta {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #999;
        }
        
        .merchant-distance {
            color: var(--primary-color);
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="location">
            <span>中国</span>
            <span class="material-icons">keyboard_arrow_down</span>
        </div>
        <div class="search-btn">
                <span class="material-icons">search</span>
        </div>
    </div>
    
    <!-- 地图容器 -->
    <div id="container"></div>
    
    <!-- 滑动内容区域 -->
    <div class="sliding-content">
        <div class="sliding-handle"></div>
        
        <!-- 八大功能模块 -->
        <div class="modules-section">
            <div class="section-title">平台服务</div>
            <div class="modules-grid">
                <div class="module-item">
                    <div class="icon">
                        <span class="material-icons">flight_takeoff</span>
                    </div>
                    <div class="name">低空文旅</div>
                    <div class="desc">飞行体验</div>
                </div>
                <div class="module-item">
                    <div class="icon">
                        <span class="material-icons">school</span>
                    </div>
                    <div class="name">低空研学</div>
                    <div class="desc">知识探索</div>
                </div>
                <div class="module-item">
                    <div class="icon">
                        <span class="material-icons">domain</span>
                    </div>
                    <div class="name">营地建设</div>
                    <div class="desc">基地规划</div>
                </div>
                <div class="module-item">
                    <div class="icon">
                        <span class="material-icons">healing</span>
                    </div>
                    <div class="name">应急救援</div>
                    <div class="desc">安全保障</div>
                </div>
                <div class="module-item">
                    <div class="icon">
                        <span class="material-icons">local_shipping</span>
                    </div>
                    <div class="name">空中物流</div>
                    <div class="desc">高效配送</div>
                </div>
                <div class="module-item">
                    <div class="icon">
                        <span class="material-icons">store</span>
                    </div>
                    <div class="name">飞机商家</div>
                    <div class="desc">设备采购</div>
                </div>
                <div class="module-item">
                    <div class="icon">
                        <span class="material-icons">security</span>
                    </div>
                    <div class="name">低空保险</div>
                    <div class="desc">全面保障</div>
                </div>
                <div class="module-item">
                    <div class="icon">
                        <span class="material-icons">commute</span>
                    </div>
                    <div class="name">中空出行</div>
                    <div class="desc">便捷交通</div>
                </div>
            </div>
        </div>
        
        <!-- 行业资讯 -->
        <div class="news-section">
            <div class="section-title">
                <span>行业资讯</span>
                <span class="more">更多 ></span>
            </div>
            <div class="news-list">
                <div class="news-item">
                    <div class="news-content">
                        <div class="title">低空经济发展新政策出台，多项利好助推行业腾飞</div>
                        <div class="meta">
                            <span class="time">2025-06-15</span>
                            <span class="views">1,280次阅读</span>
                        </div>
                    </div>
                    <div class="thumbnail">
                        <img src="https://pan.feiwow.com/raw/files/2371749239651_.pic_hd-1749239667896.jpg" alt="新闻缩略图">
                    </div>
                </div>
                <div class="news-item">
                    <div class="news-content">
                        <div class="title">中空领航与多家企业达成战略合作，共建低空生态圈</div>
                        <div class="meta">
                            <span class="time">2025-06-12</span>
                            <span class="views">965次阅读</span>
                        </div>
                    </div>
                    <div class="thumbnail">
                        <img src="https://pan.feiwow.com/raw/files/2381749239721_.pic-1749239730412.jpg" alt="新闻缩略图">
                    </div>
                </div>
                <div class="news-item">
                    <div class="news-content">
                        <div class="title">低空旅游成为新热点，多地景区推出特色飞行体验项目</div>
                        <div class="meta">
                            <span class="time">2025-06-10</span>
                            <span class="views">1,542次阅读</span>
                        </div>
                    </div>
                    <div class="thumbnail">
                        <img src="https://pan.feiwow.com/raw/files/2391749239913_.pic_hd-1749239921454.jpg" alt="新闻缩略图">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item active">
            <div class="icon">
                <span class="material-icons">home</span>
            </div>
            <div class="label">首页</div>
        </div>
        <div class="nav-item">
            <div class="icon">
                <span class="material-icons">flight</span>
            </div>
            <div class="label">当股东</div>
        </div>
        <div class="nav-item featured">
            <div class="icon">
                <span class="material-icons">landscape</span>
            </div>
            <div class="label">建营地</div>
        </div>
        <div class="nav-item">
            <div class="icon">
                <span class="material-icons">videocam</span>
            </div>
            <div class="label">领红包</div>
        </div>
        <div class="nav-item">
            <div class="icon">
                <span class="material-icons">person</span>
            </div>
            <div class="label">我的</div>
        </div>
    </div>
    
    <!-- 自定义定位按钮 -->
    <div class="location-btn">
        <span class="material-icons">location_on</span>
    </div>
    
    <!-- 红包弹窗 -->
    <div class="red-packet-modal" style="display: none;">
        <div class="red-packet-content">
            <div class="red-packet-close">
                <span class="material-icons">close</span>
            </div>
            <div class="red-packet-header">恭喜发财</div>
            <div class="red-packet-amount">¥<span id="redPacketAmount">0.00</span></div>
            <div class="red-packet-text">中空领航低空红包</div>
            <button class="red-packet-open">开启红包</button>
        </div>
    </div>
    
    <!-- 商户列表 -->
    <div class="merchants-card">
        <div class="merchants-handle"></div>
        <div class="merchants-header">周边商户</div>
        
    </div>
    
    <!-- 高德地图API -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=88f8067596e552e821541f3ff0b550aa"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化地图
            const map = new AMap.Map('container', {
                zoom: 4,
                center: [116.397428, 39.90923], // 北京中心点
                resizeEnable: true,
                viewMode: '2D',
                mapStyle: 'amap://styles/whitesmoke'
            });
            
            // 合作商家点位数据
            const markers = [
                { position: [116.397428, 39.90923], title: '北京中心', icon: 'plane', count: 1 },
                { position: [121.473701, 31.230416], title: '上海中心', icon: 'plane', count: 22 },
                { position: [113.264385, 23.129112], title: '广州中心', icon: 'plane', count: 8 },
                { position: [114.085947, 22.547], title: '深圳中心', icon: 'plane', count: 4 },
                { position: [108.93984, 34.341575], title: '西安中心', icon: 'plane', count: 2 },
                { position: [104.066541, 30.572269], title: '成都中心', icon: 'plane', count: 1 },
                { position: [120.15358, 30.287459], title: '杭州中心', icon: 'plane', count: 3 },
                { position: [117.190182, 39.125596], title: '天津中心', icon: 'plane', count: 2 },
                { position: [118.79647, 32.058563], title: '南京中心', icon: 'plane', count: 1 },
                { position: [106.504962, 29.533155], title: '重庆中心', icon: 'plane', count: 1 },
                { position: [114.298572, 30.584355], title: '武汉中心', icon: 'plane', count: 1 },
                { position: [112.945332, 28.234889], title: '长沙中心', icon: 'plane', count: 1 },
                { position: [117.233451, 31.826578], title: '合肥中心', icon: 'plane', count: 1 },
                { position: [126.642464, 45.756967], title: '哈尔滨中心', icon: 'plane', count: 1 },
                { position: [123.429096, 41.796767], title: '沈阳中心', icon: 'plane', count: 1 },
                { position: [125.3245, 43.886841], title: '长春中心', icon: 'plane', count: 1 },
                { position: [103.823557, 36.058039], title: '兰州中心', icon: 'plane', count: 1 },
                { position: [106.278179, 38.46637], title: '银川中心', icon: 'plane', count: 1 },
                { position: [117.00092, 36.675807], title: '济南中心', icon: 'plane', count: 2 },
                { position: [113.665412, 34.757975], title: '郑州中心', icon: 'plane', count: 1 },
                { position: [119.306239, 26.075302], title: '福州中心', icon: 'plane', count: 1 },
                { position: [116.758603, 39.623142], title: '廊坊市中心', icon: 'plane', count: 2 },
                { position: [111.672701, 40.828319], title: '呼和浩特中心', icon: 'plane', count: 1 },
                { position: [121.633165, 38.915717], title: '大连中心', icon: 'plane', count: 3 },
                { position: [118.11022, 24.490474], title: '厦门中心', icon: 'plane', count: 1 }
            ];
            
            // 创建标记点
            const markerList = [];
            markers.forEach(item => {
                // 创建自定义标记图标
                const markerContent = document.createElement('div');
                markerContent.className = 'custom-marker';
                markerContent.innerHTML = `
                    <div style="background-color: rgba(14, 56, 115, 0.8); color: white; border-radius: 50%; width: 28px; height: 28px; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3);">
                        <div style="position: relative;">
                            <span class="material-icons" style="font-size: 16px;">flight</span>
                            ${item.count > 1 ? `<span style="position: absolute; top: -8px; right: -8px; background-color: white; color: #0B3D91; border-radius: 50%; width: 16px; height: 16px; font-size: 10px; display: flex; justify-content: center; align-items: center; font-weight: bold;">${item.count}</span>` : ''}
                        </div>
                    </div>
                `;
                
                const marker = new AMap.Marker({
                    position: item.position,
                    title: item.title,
                    content: markerContent,
                    anchor: 'center',
                    offset: new AMap.Pixel(0, 0)
                });
                
                // 创建信息窗体
                const infoWindow = new AMap.InfoWindow({
                    isCustom: true,
                    content: `<div class="info-window">
                        <div class="header">
                            <img src="https://pan.feiwow.com/raw/files/2371749239651_.pic_hd-1749239667896.jpg" alt="${item.title}">
                            <div>
                                <div class="title">${item.title}</div>
                                <div class="flight">B-3256</div>
                            </div>
                        </div>
                    </div>`,
                    offset: new AMap.Pixel(0, -30)
                });
                
                // 绑定点击事件
                marker.on('click', function() {
                    infoWindow.open(map, item.position);
                });
                
                markerList.push(marker);
            });
            
            // 将标记添加到地图
            map.add(markerList);
            
            // 点击地图关闭信息窗体
            map.on('click', function() {
                map.clearInfoWindow();
            });
            
            // 底部导航切换
            const navItems = document.querySelectorAll('.nav-item');
            navItems.forEach((item) => {
                item.addEventListener('click', function() {
                    navItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 获取当前点击的导航项的标签文本
                    const label = this.querySelector('.label').textContent.trim();
                    
                    // 根据标签文本确定要跳转的页面
                    let targetPage;
                    switch(label) {
                        case '首页':
                            targetPage = 'index.html';
                            break;
                        case '当股东':
                            targetPage = 'airplane.html';
                            break;
                        case '建营地':
                            targetPage = 'camp.html';
                            break;
                        case '领红包':
                            targetPage = 'video.html';
                            break;
                        case '我的':
                            targetPage = 'my.html';
                            break;
                        default:
                            return; // 如果没有匹配的标签，不执行任何操作
                    }
                    
                    // 获取当前页面的文件名
                    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
                    
                    // 如果点击的是当前页面对应的导航项，不执行任何操作
                    if (targetPage === currentPage) {
                        return;
                    }
                    
                    // 否则跳转到对应页面
                    window.location.href = targetPage;
                });
            });
            
            // 滑动控制功能
            const slidingContent = document.querySelector('.sliding-content');
            const slidingHandle = document.querySelector('.sliding-handle');
            
            let startY = 0;
            let currentHeight = 50; // 初始高度为50%
            let isDragging = false;
            
            // 默认状态设置为中间状态
            slidingContent.style.maxHeight = currentHeight + '%';
            
            // 触摸开始事件
            slidingContent.addEventListener('touchstart', function(e) {
                startY = e.touches[0].clientY;
                isDragging = true;
                slidingContent.style.transition = 'none'; // 拖动时禁用过渡
            });
            
            // 触摸移动事件
            slidingContent.addEventListener('touchmove', function(e) {
                if (!isDragging) return;
                
                const touchY = e.touches[0].clientY;
                const diffY = touchY - startY;
                const windowHeight = window.innerHeight;
                
                // 计算新的高度百分比
                let newHeight = currentHeight - (diffY / windowHeight * 100);
                
                // 限制高度范围在10%到80%之间
                newHeight = Math.max(10, Math.min(80, newHeight));
                
                slidingContent.style.maxHeight = newHeight + '%';
            });
            
            // 触摸结束事件
            slidingContent.addEventListener('touchend', function(e) {
                if (!isDragging) return;
                isDragging = false;
                
                // 恢复过渡效果
                slidingContent.style.transition = 'max-height 0.3s ease';
                
                // 获取当前高度
                const currentValue = parseFloat(slidingContent.style.maxHeight);
                
                // 根据当前高度决定是展开还是收缩
                if (currentValue < 30) {
                    // 收缩到10%
                    slidingContent.style.maxHeight = '10%';
                    slidingContent.classList.add('collapsed');
                    slidingContent.classList.remove('expanded');
                    currentHeight = 10;
                } else if (currentValue > 60) {
                    // 展开到80%
                    slidingContent.style.maxHeight = '80%';
                    slidingContent.classList.add('expanded');
                    slidingContent.classList.remove('collapsed');
                    currentHeight = 80;
                } else {
                    // 保持在50%
                    slidingContent.style.maxHeight = '50%';
                    slidingContent.classList.remove('expanded');
                    slidingContent.classList.remove('collapsed');
                    currentHeight = 50;
                }
            });
            
            // 滑动把手的点击事件，简单切换展开和折叠状态
            slidingHandle.addEventListener('click', function() {
                slidingContent.style.transition = 'max-height 0.3s ease';
                
                if (currentHeight <= 10) {
                    // 从折叠状态切换到中间状态
                    slidingContent.style.maxHeight = '50%';
                    slidingContent.classList.remove('collapsed');
                    slidingContent.classList.remove('expanded');
                    currentHeight = 50;
                } else if (currentHeight >= 80) {
                    // 从展开状态切换到折叠状态
                    slidingContent.style.maxHeight = '10%';
                    slidingContent.classList.add('collapsed');
                    slidingContent.classList.remove('expanded');
                    currentHeight = 10;
                } else {
                    // 从中间状态切换到展开状态
                    slidingContent.style.maxHeight = '80%';
                    slidingContent.classList.add('expanded');
                    slidingContent.classList.remove('collapsed');
                    currentHeight = 80;
                }
            });

            // 定位按钮功能
            const locationBtn = document.querySelector('.location-btn');
            // 记录是否已定位到当前位置
            let isLocated = false;
            // 记录初始地图中心点和缩放级别
            const initialMapCenter = [116.397428, 39.90923]; // 北京中心点
            const initialMapZoom = 4;
            // 存储红包标记的数组
            let redPacketMarkers = [];

            locationBtn.addEventListener('click', function() {
                if (!isLocated) {
                    // 切换到定位状态
                    // 显示加载状态
                    locationBtn.innerHTML = '<span class="material-icons" style="animation: spin 1s linear infinite;">sync</span>';
                    
                    // 使用高德地图的定位插件
                    AMap.plugin(['AMap.Geolocation'], function() {
                        var geolocation = new AMap.Geolocation({
                            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
                            timeout: 10000,          // 超过10秒后停止定位，默认：5s
                            buttonPosition: 'RB',    // 定位按钮的停靠位置
                            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量
                            zoomToAccuracy: true,    // 定位成功后是否自动调整地图视野到定位点
                            GeoLocationFirst: false, // 默认为false，设置为true的时候可以调整PC端为优先使用浏览器定位，失败后使用IP定位
                            useNative: true          // 是否使用安卓定位sdk用来进行定位，默认：false
                        });
                        
                        map.addControl(geolocation);

                        // 定位失败后，直接使用指定位置
                        const handleLocationError = function(err) {
                            console.log("浏览器定位失败，使用指定位置", err);
                            
                            // 使用指定位置坐标（合肥市附近）
                            const fixedPosition = [117.155402, 31.86788];
                            
                            // 使用指定位置
                            handleLocationSuccess({
                                position: fixedPosition,
                                accuracy: 1000, // 精度设为1公里
                                info: '指定位置',
                                message: '使用指定位置坐标'
                            });
                        };
                        
                        // 定位成功的处理函数
                        const handleLocationSuccess = function(result) {
                            // 定位成功，切换到地球图标
                            locationBtn.innerHTML = '<span class="material-icons">public</span>';
                            isLocated = true;
                            
                            // 定位成功
                            // 确保position是一个数组形式 [经度, 纬度]
                            var position;
                            if (Array.isArray(result.position)) {
                                position = result.position;
                            } else if (result.position instanceof AMap.LngLat) {
                                position = [result.position.getLng(), result.position.getLat()];
                            } else if (typeof result.position === 'object' && result.position !== null) {
                                // 尝试从对象中获取经纬度
                                position = [parseFloat(result.position.lng || result.position.longitude || 0), 
                                           parseFloat(result.position.lat || result.position.latitude || 0)];
                            } else {
                                // 如果无法获取有效位置，使用默认坐标
                                console.warn("无法获取有效位置数据，使用默认坐标");
                                position = [117.155402, 31.86788];
                            }
                            
                            console.log("定位成功，处理后的坐标:", position);
                            
                            // 创建当前位置的标记
                            var currentLocationMarker = new AMap.Marker({
                                position: position,
                                icon: new AMap.Icon({
                                    size: new AMap.Size(20, 20),
                                    image: ''
                                }),
                                zIndex: 100
                            });
                            
                            // 清除之前的位置标记
                            map.remove(map.getAllOverlays('marker').filter(marker => 
                                marker.getExtData() && marker.getExtData().isCurrentLocation
                            ));
                            
                            // 设置当前位置标记的扩展数据
                            currentLocationMarker.setExtData({isCurrentLocation: true});
                            
                            // 将标记添加到地图
                            map.add(currentLocationMarker);
                            
                            // 移动到当前位置
                            map.setCenter(position);
                            map.setZoom(14);
                            
                            // 添加精度圈
                            var circle = new AMap.Circle({
                                center: position,
                                radius: result.accuracy || 1000, // 如果没有精度信息，默认为1公里
                                fillOpacity: 0.1,
                                strokeOpacity: 0.3,
                                fillColor: '#1791fc',
                                strokeColor: '#1791fc'
                            });
                            
                            // 清除之前的精度圈
                            map.remove(map.getAllOverlays('circle'));
                            
                            // 添加新的精度圈
                            map.add(circle);
                            
                            // 隐藏原滑动内容
                            slidingContent.style.display = 'none';
                            
                            // 生成并显示商户列表
                            generateMerchantsList(position);
                            
                            // 清除之前的红包标记
                            if (redPacketMarkers.length > 0) {
                                map.remove(redPacketMarkers);
                                redPacketMarkers = [];
                            }
                            
                            // 在用户周围随机生成红包
                            createRandomRedPackets(position, 8);
                        };
                        
                        // 先尝试浏览器定位
                        geolocation.getCurrentPosition(function(status, result) {
                            if (status === 'complete') {
                                handleLocationSuccess(result);
                            } else {
                                console.log("定位失败", result.message);
                                handleLocationError(result.message);
                            }
                        });
                    });
                } else {
                    // 已定位状态，点击切换回全国地图
                    locationBtn.innerHTML = '<span class="material-icons">location_on</span>';
                    isLocated = false;
                    
                    // 清除定位标记和精度圈
                    map.remove(map.getAllOverlays('marker').filter(marker => 
                        marker.getExtData() && marker.getExtData().isCurrentLocation
                    ));
                    map.remove(map.getAllOverlays('circle'));
                    
                    // 清除红包标记
                    if (redPacketMarkers.length > 0) {
                        map.remove(redPacketMarkers);
                        redPacketMarkers = [];
                    }
                    
                    // 清除临时商户标记
                    const tempMarkers = map.getAllOverlays('marker').filter(marker => 
                        marker.getExtData() && marker.getExtData().isMerchantTemp
                    );
                    map.remove(tempMarkers);
                    
                    // 隐藏商户列表
                    const merchantsCard = document.querySelector('.merchants-card');
                    merchantsCard.style.display = 'none';
                    
                    // 显示原有sliding-content
                    slidingContent.style.display = 'block';
                    slidingContent.style.maxHeight = '50%';
                    slidingContent.classList.remove('collapsed');
                    slidingContent.classList.remove('expanded');
                    currentHeight = 50;
                    
                    // 恢复到全国地图视图
                    map.setCenter(initialMapCenter);
                    map.setZoom(initialMapZoom);
                }
            });

            // 在用户周围随机生成红包
            function createRandomRedPackets(centerPosition, count) {
                console.log("开始生成红包，数量：" + count);
                
                // 确保centerPosition是有效的数组
                if (!Array.isArray(centerPosition) || centerPosition.length < 2 || 
                    isNaN(centerPosition[0]) || isNaN(centerPosition[1])) {
                    console.error("无效的中心位置坐标：", centerPosition);
                    return; // 如果坐标无效，则不生成红包
                }
                
                // 清除之前的红包标记
                if (redPacketMarkers.length > 0) {
                    map.remove(redPacketMarkers);
                    redPacketMarkers = [];
                }
                
                // 测试红包 - 在正前方500米处固定位置创建一个红包
                createTestRedPacket(centerPosition);
                
                try {
                    for (let i = 0; i < count; i++) {
                        // 生成距离中心点0.5-2公里的随机位置
                        const distance = Math.random() * 1500 + 500; // 500-2000米
                        const angle = Math.random() * Math.PI * 2; // 0-360度
                        
                        // 计算经纬度偏移（简化计算，不考虑地球曲率）
                        // 经度1度约为111公里
                        const latOffset = distance / 111000 * Math.cos(angle);
                        const lngOffset = distance / (111000 * Math.cos(centerPosition[1] * Math.PI / 180)) * Math.sin(angle);
                        
                        const position = [
                            centerPosition[0] + lngOffset,
                            centerPosition[1] + latOffset
                        ];
                        
                        // 创建红包金额（1-88元之间的随机金额）
                        const amount = (Math.random() * 87 + 1).toFixed(2);
                        
                        // 创建红包标记
                        const redPacketMarker = new AMap.Marker({
                            position: position,
                            content: `<div style="background-color: #FF3B30; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 3px 6px rgba(0,0,0,0.3);">
                                        <span style="color: #FFD700; font-size: 24px;">🧧</span>
                                     </div>`,
                            offset: new AMap.Pixel(-20, -20),
                            zIndex: 99,
                            extData: {
                                isRedPacket: true,
                                amount: amount
                            }
                        });
                        
                        // 绑定点击事件
                        redPacketMarker.on('click', function() {
                            const packetAmount = this.getExtData().amount;
                            showRedPacketModal(packetAmount);
                            
                            // 点击后移除该红包
                            map.remove(redPacketMarker);
                            redPacketMarkers = redPacketMarkers.filter(marker => marker !== redPacketMarker);
                        });
                        
                        // 添加到地图和保存到数组
                        map.add(redPacketMarker);
                        redPacketMarkers.push(redPacketMarker);
                    }
                } catch (error) {
                    console.error("创建随机红包失败：", error);
                }
                
                console.log("红包生成完毕，总数：", redPacketMarkers.length);
            }

            // 创建测试红包 - 在固定位置创建一个明显的测试红包
            function createTestRedPacket(centerPosition) {
                // 确保centerPosition是有效的数组
                if (!Array.isArray(centerPosition) || centerPosition.length < 2 || 
                    isNaN(centerPosition[0]) || isNaN(centerPosition[1])) {
                    console.error("无效的中心位置坐标：", centerPosition);
                    return; // 如果坐标无效，则不创建红包
                }
                
                // 在正前方500米处创建一个测试红包
                const testPosition = [
                    centerPosition[0],
                    centerPosition[1] + (500 / 111000) // 向正北方500米
                ];
                
                console.log("创建测试红包，位置：", testPosition);
                
                try {
                    const testMarker = new AMap.Marker({
                        position: testPosition,
                        content: `<div style="background-color: #FF3B30; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 3px 6px rgba(0,0,0,0.3);">
                                    <span style="color: #FFD700; font-size: 36px;">💰</span>
                                 </div>`,
                        offset: new AMap.Pixel(-30, -30),
                        zIndex: 100
                    });
                    
                    // 绑定点击事件
                    testMarker.on('click', function() {
                        showRedPacketModal("88.88");
                        
                        // 点击后移除测试红包
                        map.remove(testMarker);
                        redPacketMarkers = redPacketMarkers.filter(marker => marker !== testMarker);
                    });
                    
                    // 添加到地图和保存到数组
                    map.add(testMarker);
                    redPacketMarkers.push(testMarker);
                    
                    console.log("测试红包创建成功");
                } catch (error) {
                    console.error("创建测试红包失败：", error);
                }
            }

            // 显示红包弹窗
            function showRedPacketModal(amount) {
                const modal = document.querySelector('.red-packet-modal');
                const amountElem = document.getElementById('redPacketAmount');
                
                // 设置红包金额
                amountElem.textContent = amount;
                
                // 显示弹窗
                modal.style.display = 'flex';
                
                // 绑定关闭按钮事件
                const closeBtn = document.querySelector('.red-packet-close');
                closeBtn.onclick = function() {
                    modal.style.display = 'none';
                };
                
                // 绑定开红包按钮事件
                const openBtn = document.querySelector('.red-packet-open');
                openBtn.onclick = function() {
                    // 显示红包已领取的状态
                    openBtn.textContent = '已领取';
                    openBtn.disabled = true;
                    openBtn.style.backgroundColor = '#ccc';
                    
                    // 假设这里调用领取红包的API
                    setTimeout(() => {
                        alert('恭喜您获得' + amount + '元红包！已存入您的账户。');
                        modal.style.display = 'none';
                        
                        // 重置按钮状态以便下次使用
                        setTimeout(() => {
                            openBtn.textContent = '开启红包';
                            openBtn.disabled = false;
                            openBtn.style.backgroundColor = '#FFD700';
                        }, 500);
                    }, 1000);
                };
            }

            // 生成商户列表
            function generateMerchantsList(position) {
                // 商户数据模板
                const merchantsData = [
                    {
                        name: "航空体验中心",
                        image: "https://pan.feiwow.com/raw/files/2341749239120_.pic-1749239262644.jpg",
                        description: "提供专业的低空飞行体验，拥有多种机型可供选择",
                        distance: getRandomDistance(500, 3000)
                    },
                    {
                        name: "空中餐厅",
                        image: "https://pan.feiwow.com/raw/files/2351749239339_.pic_hd-1749239353419.jpg",
                        description: "独特的空中用餐体验，可俯瞰城市美景",
                        distance: getRandomDistance(500, 3000)
                    },
                    {
                        name: "飞行培训学校",
                        image: "https://pan.feiwow.com/raw/files/2361749239507_.pic_hd-1749239518642.jpg",
                        description: "专业的飞行培训机构，拥有资深教练团队",
                        distance: getRandomDistance(500, 3000)
                    },
                    {
                        name: "航空装备商店",
                        image: "https://pan.feiwow.com/raw/files/2371749239651_.pic_hd-1749239667896.jpg",
                        description: "销售各类飞行设备、装备和纪念品",
                        distance: getRandomDistance(500, 3000)
                    },
                    {
                        name: "低空旅游营地",
                        image: "https://pan.feiwow.com/raw/files/2381749239721_.pic-1749239730412.jpg",
                        description: "集低空游览、休闲度假于一体的特色营地",
                        distance: getRandomDistance(500, 3000)
                    },
                    {
                        name: "航空科普馆",
                        image: "https://pan.feiwow.com/raw/files/2391749239913_.pic_hd-1749239921454.jpg",
                        description: "了解航空知识，体验飞行模拟器的互动场所",
                        distance: getRandomDistance(500, 3000)
                    }
                ];
                
                // 按距离排序
                merchantsData.sort((a, b) => a.distance - b.distance);
                
                // 获取商户列表容器
                const merchantsCard = document.querySelector('.merchants-card');
                const merchantsList = merchantsCard.querySelector('.merchants-header').nextElementSibling;
                
                // 清空现有内容（保留标题）
                while (merchantsList) {
                    if (merchantsList.nextElementSibling) {
                        merchantsCard.removeChild(merchantsList.nextElementSibling);
                    } else {
                        break;
                    }
                }
                
                // 添加新商户数据
                merchantsData.forEach(merchant => {
                    const merchantItem = document.createElement('div');
                    merchantItem.className = 'merchant-item';
                    
                    const distanceText = merchant.distance < 1000 ? 
                        `${merchant.distance}米` : 
                        `${(merchant.distance / 1000).toFixed(1)}公里`;
                    
                    merchantItem.innerHTML = `
                        <div class="merchant-image">
                            <img src="${merchant.image}" alt="${merchant.name}">
                        </div>
                        <div class="merchant-info">
                            <div class="merchant-name">${merchant.name}</div>
                            <div class="merchant-desc">${merchant.description}</div>
                            <div class="merchant-meta">
                                <span class="merchant-distance">距离：${distanceText}</span>
                            </div>
                        </div>
                    `;
                    
                    merchantsCard.appendChild(merchantItem);
                    
                    // 添加点击事件，在地图上标记该商户位置
                    merchantItem.addEventListener('click', function() {
                        // 生成商户坐标（根据距离和随机角度）
                        const merchantPos = calculatePositionByDistance(
                            position, 
                            merchant.distance, 
                            Math.random() * Math.PI * 2
                        );
                        
                        // 移动地图到该商户位置
                        map.setCenter(merchantPos);
                        
                        // 添加标记
                        const merchantMarker = new AMap.Marker({
                            position: merchantPos,
                            content: `<div style="background-color: #0B3D91; padding: 5px 10px; border-radius: 4px; color: white;">
                                       <span>${merchant.name}</span>
                                     </div>`,
                            offset: new AMap.Pixel(0, -15)
                        });
                        
                        // 清除之前的临时商户标记
                        const tempMarkers = map.getAllOverlays('marker').filter(marker => 
                            marker.getExtData() && marker.getExtData().isMerchantTemp
                        );
                        map.remove(tempMarkers);
                        
                        // 设置为临时标记
                        merchantMarker.setExtData({isMerchantTemp: true});
                        map.add(merchantMarker);
                    });
                });
                
                // 显示商户列表
                merchantsCard.style.display = 'block';
                
                // 添加滑动把手事件
                const merchantsHandle = document.querySelector('.merchants-handle');
                let startY = 0;
                let currentHeight = 50; // 初始高度为50%
                let isDragging = false;
                
                // 设置初始高度
                merchantsCard.style.maxHeight = currentHeight + '%';
                
                // 为整个商户卡片添加滑动事件，而不仅仅是把手
                merchantsCard.addEventListener('touchstart', function(e) {
                    startY = e.touches[0].clientY;
                    isDragging = true;
                    merchantsCard.style.transition = 'none'; // 拖动时禁用过渡
                });
                
                // 触摸移动事件
                merchantsCard.addEventListener('touchmove', function(e) {
                    if (!isDragging) return;
                    
                    const touchY = e.touches[0].clientY;
                    const diffY = touchY - startY;
                    const windowHeight = window.innerHeight;
                    
                    // 计算新的高度百分比
                    let newHeight = currentHeight - (diffY / windowHeight * 100);
                    
                    // 限制高度范围在10%到80%之间
                    newHeight = Math.max(10, Math.min(80, newHeight));
                    
                    merchantsCard.style.maxHeight = newHeight + '%';
                });
                
                // 触摸结束事件
                merchantsCard.addEventListener('touchend', function(e) {
                    if (!isDragging) return;
                    isDragging = false;
                    
                    // 恢复过渡效果
                    merchantsCard.style.transition = 'max-height 0.3s ease';
                    
                    // 获取当前高度
                    const currentValue = parseFloat(merchantsCard.style.maxHeight);
                    
                    // 根据当前高度决定是展开还是收缩
                    if (currentValue < 30) {
                        // 收缩到10%
                        merchantsCard.style.maxHeight = '10%';
                        merchantsCard.classList.add('collapsed');
                        merchantsCard.classList.remove('expanded');
                        currentHeight = 10;
                    } else if (currentValue > 60) {
                        // 展开到80%
                        merchantsCard.style.maxHeight = '80%';
                        merchantsCard.classList.add('expanded');
                        merchantsCard.classList.remove('collapsed');
                        currentHeight = 80;
                    } else {
                        // 保持在50%
                        merchantsCard.style.maxHeight = '50%';
                        merchantsCard.classList.remove('expanded');
                        merchantsCard.classList.remove('collapsed');
                        currentHeight = 50;
                    }
                });

                // 商户滑动把手的点击事件，简单切换展开和折叠状态
                merchantsHandle.addEventListener('click', function() {
                    merchantsCard.style.transition = 'max-height 0.3s ease';
                    
                    if (currentHeight <= 10) {
                        // 从折叠状态切换到中间状态
                        merchantsCard.style.maxHeight = '50%';
                        merchantsCard.classList.remove('collapsed');
                        merchantsCard.classList.remove('expanded');
                        currentHeight = 50;
                    } else if (currentHeight >= 80) {
                        // 从展开状态切换到折叠状态
                        merchantsCard.style.maxHeight = '10%';
                        merchantsCard.classList.add('collapsed');
                        merchantsCard.classList.remove('expanded');
                        currentHeight = 10;
                    } else {
                        // 从中间状态切换到展开状态
                        merchantsCard.style.maxHeight = '80%';
                        merchantsCard.classList.add('expanded');
                        merchantsCard.classList.remove('collapsed');
                        currentHeight = 80;
                    }
                });
            }

            // 辅助函数：生成随机距离
            function getRandomDistance(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }

            // 辅助函数：根据距离和角度计算坐标
            function calculatePositionByDistance(basePosition, distance, angle) {
                // 经度1度约为111公里
                const latOffset = distance / 111000 * Math.cos(angle);
                const lngOffset = distance / (111000 * Math.cos(basePosition[1] * Math.PI / 180)) * Math.sin(angle);
                
                return [
                    basePosition[0] + lngOffset,
                    basePosition[1] + latOffset
                ];
            }

            // 添加CSS动画
            const style = document.createElement('style');
            style.textContent = `
            @keyframes spin {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }`;
            document.head.appendChild(style);
            
            // 初始化引导系统
            setTimeout(() => {
                // 首页引导步骤配置
                const indexGuideSteps = [
                    {
                        target: '.location',
                        title: '位置选择',
                        content: '点击这里可以切换您当前的位置，查看不同地区的航空资源。',
                        position: 'bottom'
                    },
                    {
                        target: '.search-btn',
                        title: '搜索功能',
                        content: '点击这里可以搜索附近的航空资源、活动和商户。',
                        position: 'bottom'
                    },
                    {
                        target: '.location-btn',
                        title: '定位功能',
                        content: '随时点击这里回到您的当前位置。',
                        position: 'left'
                    },
                    {
                        target: '.sliding-handle',
                        title: '内容浏览',
                        content: '上下滑动这里可以查看更多功能和资讯。',
                        position: 'top'
                    },
                    {
                        target: '.modules-grid',
                        title: '功能模块',
                        content: '这里是应用的核心功能区，点击各个模块可以进入对应功能。',
                        position: 'top'
                    },
                    {
                        target: '.nav-item.featured',
                        title: '建营地',
                        content: '点击这里可以进入营地建设页面，参与互动游戏获取奖励。',
                        position: 'top'
                    }
                ];
                
                // 如果引导系统已加载，则初始化
                if (typeof guideSystem !== 'undefined') {
                    guideSystem.init('index', indexGuideSteps);
                }
            }, 1000); // 延迟1秒，确保页面元素都已加载
        });
    </script>
    
    <!-- 引入引导系统脚本 -->
    <script src="guide.js"></script>
</body>
</html>